/**
 * 微信开放数据域
 * 使用 Canvas2DAPI 在 SharedCanvas 渲染一个排行榜，
 * 并在主域中渲染此 SharedCanvas
 */



/**
 * 资源加载组，将所需资源地址以及引用名进行注册
 * 之后可通过assets.引用名方式进行获取
 */
const assetsUrl = {
  rankbg: "openDataContext/assets/rank2.png"
};

/**
 * 资源加载组，将所需资源地址以及引用名进行注册
 * 之后可通过assets.引用名方式进行获取
 */
let assets = {};
console.log();
/**
 * canvas 大小
 * 这里暂时写死
 * 需要从主域传入
 */
let canvasWidth;
let canvasHeight;

//获取canvas渲染上下文
const context = sharedCanvas.getContext("2d");
context.globalCompositeOperation = "source-over";

/** 
 * 
 * 创建排行榜   
 */
function drawRankPanel(newData) {
  // 清空画布
  context.clearRect(offsetX_rankToBorder, offsetY_rankToBorder, rankWidth, rankHeight);
  //绘制背景
  context_drawImage(assets.rankbg, offsetX_rankToBorder, offsetY_rankToBorder, rankWidth, rankHeight);
  // 重绘排行榜信息
  drawRankByGroup(newData);
}

function compareScore(a, b) {
  var value1 = undefined;
  try {
    value1 = a['KVDataList'][0]['value'];
  } catch (err) {
    value1 = -1;
  }

  var value2 = undefined;
  try {
    value2 = b['KVDataList'][0]['value'];
  } catch (err) {
    value2 = -1;
  }
  return Number(value2) - Number(value1);
}

/**
 * 根据屏幕大小初始化所有绘制数据
 */
function init() {
  //排行榜绘制数据初始化,可以在此处进行修改
  let xs = sharedCanvas.width / wx.getSystemInfoSync().windowWidth;
  rankWidth = 218 / 2.0 * xs;
  rankHeight = 246 / 2.0 * xs;

  offsetX_rankToBorder = stageWidth - rankWidth;
  offsetY_rankToBorder = wx.getSystemInfoSync().windowHeight * 0.2;
  preOffsetY = 36 / 2.0 * xs;
  startX = offsetX_rankToBorder + 100 / 2.0 * xs;
  startY = offsetY_rankToBorder + 83 / 2.0 * xs;

  // //按钮绘制数据初始化
  let data = wx.getSystemInfoSync();
  canvasWidth = data.windowWidth;
  canvasHeight = data.windowHeight;

}


/**
 * 根据当前绘制组绘制排行榜
 */
function drawRankByGroup(currentGroup) {
  last_rank_data = currentGroup;
  var length = currentGroup.length;
  for (let i = 0; i < length; i++) {
    const data = currentGroup[i];
    drawByData(data, i);
  }
}

/**
 * 根据绘制信息以及当前i绘制元素
 */
function drawByData(data, i) {
  //绘制昵称
  context.font = 12 * (sharedCanvas.width / wx.getSystemInfoSync().windowWidth) + "px '微软雅黑'";
  context.fillStyle = "#FCBB17";
  if(data.nickname.length > 6){
    data.nickname = data.nickname.slice(0, 5) + "...";
  }
  context.fillText(data.nickname + "", startX, startY + i * preOffsetY, offsetX_rankToBorder + rankWidth - startX);
}

/**
 * 点击处理
 */
function onTouchEnd(event) {
  // let x = event.clientX * sharedCanvas.width / canvasWidth;
  // let y = event.clientY * sharedCanvas.height / canvasHeight;
  // if (x > lastButtonX && x < lastButtonX + buttonWidth &&
  //   y > lastButtonY && y < lastButtonY + buttonHeight) {
  //   //在last按钮的范围内
  //   if (page > 0) {
  //     buttonClick(0);

  //   }
  // }
  // if (x > nextButtonX && x < nextButtonX + buttonWidth &&
  //   y > nextButtonY && y < nextButtonY + buttonHeight) {
  //   //在next按钮的范围内
  //   if ((page + 1) * perPageMaxNum < totalGroup.length) {
  //     buttonClick(1);
  //   }
  // }

}

/////////////////////////////////////////////////////////////////// 相关缓存数据

///////////////////////////////////数据相关/////////////////////////////////////

/**
 * 渲染标脏量
 * 会在被标脏（true）后重新渲染
 */
let renderDirty = true;

/**
 * 当前绘制组
 */
let currentGroup = [];
///////////////////////////////////绘制相关///////////////////////////////
/**
 * 舞台大小
 */
let stageWidth;
let stageHeight;
/**
 * 排行榜大小
 */
let rankWidth;
let rankHeight;

/**
 * 条目与排行榜边界的水平距离
 */
let offsetX_barToRank
/**
 * 绘制排行榜起始点X
 */
let startX;
/**
 * 绘制排行榜起始点Y
 */
let startY;
/**
 * 每行Y轴间隔offsetY
 */
let preOffsetY;

/**
 * 名字文本最大宽度，名称会根据
 */
let textMaxSize;
/**
 * 排行榜与舞台边界的水平距离
 */
let offsetX_rankToBorder;
/**
 * 排行榜与舞台边界的竖直距离
 */
let offsetY_rankToBorder;
// 取多少条数据
let dataNum = 5;

//////////////////////////////////////////////////////////
/**
 * 监听点击
 */
wx.onTouchEnd((event) => {
  // const l = event.changedTouches.length;
  // for (let i = 0; i < l; i++) {
  //   onTouchEnd(event.changedTouches[i]);
  // }
});


/**
 * 是否加载过资源的标记量
 */
let hasLoadRes;

// 上次排行榜的内容
var last_rank_data = undefined;

/**
 * 资源加载
 */
function preloadAssets() {
  let preloaded = 0;
  let count = 0;
  for (let asset in assetsUrl) {
    count++;
    const img = wx.createImage();
    img.onload = () => {
      preloaded++;
      if (preloaded == count) {
        // console.log("加载完成");
        hasLoadRes = true;
      }

    }
    img.src = assetsUrl[asset];
    assets[asset] = img;
  }
}


/**
 * 绘制屏幕
 * 这个函数会在加载完所有资源之后被调用
 */
function createScene() {
  if (sharedCanvas.width && sharedCanvas.height) {
    // console.log('初始化完成')
    stageWidth = sharedCanvas.width;
    stageHeight = sharedCanvas.height;
    // console.log("-------------");
    // console.log(sharedCanvas.width, sharedCanvas.height);
    init();
    return true;
  } else {
    console.log('创建开放数据域失败，请检查是否加载开放数据域资源');
    return false;
  }
}


//记录requestAnimationFrame的ID
let requestAnimationFrameID;
let hasCreateScene;

/**
 * 增加来自主域的监听函数
 */
function addOpenDataContextListener() {
  wx.onMessage((data) => {
    if (data.command == 'open') {
      if (!hasCreateScene) {
        //创建并初始化
        hasCreateScene = createScene();
      }
      requestAnimationFrameID = requestAnimationFrame(loop);
    } else if (data.command == 'close' && requestAnimationFrameID) {
      cancelAnimationFrame(requestAnimationFrameID);
      requestAnimationFrameID = null
    } else if (data.command == 'loadRes' && !hasLoadRes) {
      /**
       * 加载资源函数
       * 只需要加载一次
       */
      // console.log('加载资源')
      preloadAssets();
    } else if (data.command == "update") {
      // 获取最新数据
      getFriendRankData(function (newData) {
        if (checkIsChanged(newData)) { // 数据变了 重新绘制canvas
          drawRankPanel(newData);
        } else {
          // 数据没变 啥都不干
        }
      });
    }
  });
}

function getFriendRankData(cb) {
  wx.getFriendCloudStorage({
    keyList: ['score'], // 你要获取的、托管在微信后台都key
    success: res => {
      var newData = res.data.sort(compareScore); // 先排序
      if (newData.length > dataNum) {
        newData = newData.slice(0, dataNum);
      }
      if (cb) cb(newData);
    }
  });
}

function checkIsChanged(newData) {
  if (last_rank_data == undefined) return true;
  if (last_rank_data.length != newData.length) return true;
  var tmpObj = undefined;
  for (var i = 0; i < newData.length; i++) {
    if (newData[i]['nickname'] != last_rank_data[i]['nickname']) {
      return true;
    }
  }
  return false;
}

addOpenDataContextListener();

/**
 * 循环函数
 * 每帧判断一下是否需要渲染
 * 如果被标脏，则重新渲染
 */
function loop() {
  if (renderDirty) {
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, sharedCanvas.width, sharedCanvas.height);
    getFriendRankData(function (newData) {
      drawRankPanel(newData);
    });
    renderDirty = false;
  }
  requestAnimationFrameID = requestAnimationFrame(loop);
}

/**
 * 图片绘制函数
 */
function context_drawImage(image, x, y, width, height) {
  if (image.width != 0 && image.height != 0 && context) {
    if (width && height) {
      context.drawImage(image, x, y, width, height);
    } else {
      context.drawImage(image, x, y);
    }
  }
}